<template>
    <div class="loginbox">     
       <div class="login-contar">
            <div class="login-header">
               <span>Y3工单系统</span>
            </div>
            <div class="login-context">
               <el-form ref="form" :model="form" >
                 <el-form-item class="likas" >
                    <i class="icon-user iconsl"></i>
                   <el-input v-model="form.name" placeholder="输入工号" spellcheck="false"></el-input>
                 </el-form-item>
                 <el-form-item class="likas" >
                         <i class="icon-password iconsl"></i>
                    <el-input v-model="form.password" placeholder="输入密码" type="password" ></el-input>
                  </el-form-item>
                  <el-form-item><el-checkbox v-model="form.checked" >记住密码</el-checkbox></el-form-item>
                   <div class="tean"><el-button type="primary" round class="tean" @click.native.prevent="handleSubmit2" >登陆</el-button></div>
               </el-form>
            </div>
       </div>  
    </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        name: "xidibo",
        password: "123456",
        checked: true
      }
    };
  },
    methods: {
        handleSubmit2: function() {
          this.$router.push({ path: '/Staff' });
        }
      }
};
</script>

<style lang="less">
.loginbox {
  width: 100%;
  height: 100%;
  background: url("~/static/images/login-bg.png");
  background-size: cover;
  overflow: hidden;
  position: relative;
}
.login-contar {
  width: 470px;
  height: 544px;
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}
.login-header {
  width: 100%;
  height: 180px;
  background: url("~/static/images/login-hader.png");
  background-size: cover;
  text-align: center;
  line-height: 180px;
  span {
    font-size: 36px;
    color: #fff;
    font-weight: bold;
    text-align: center;
  }
}
.login-context {
  width: 100%;
  height: 344px;
  padding: 10px;
}
.el-form {
  width: 75%;
  margin: 70px auto;
}
.el-form-item,
.el-form-item__content {
  width: 100%;
  position: relative;
}
.el-form-item__content {
  padding-left: 50px;
}
.iconsl {
  position: absolute;
  left: 12px;
  top: 6px;
  font-size: 25px;
  color: #1a98ff;
  width: 27px;
  height: 27px;
}
.tean {
  text-align: center;
  .el-button {
    padding: 12px 60px;
    box-shadow: 0 1px 11px 0px #3ba4ff;
  }
}
.icon-user {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg t='1535533147090' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg'  width='27' height='27'><path d='M534.1 631.8c-93.3 0-177.5-56.2-213.3-142.5-35.7-86.3-16-185.5 50.1-251.6 58.3-58.4 143.3-81.2 223-59.9 79.7 21.3 142 83.6 163.3 163.3s-1.5 164.7-59.9 223.1c-43.2 43.4-102 67.8-163.2 67.6zM915 1012.8c0-210.4-170.5-380.9-380.9-380.9s-380.9 170.5-380.9 380.9H915z' fill='#46A3FB' p-id='1378'></path><path d='M798.7 946.1h-46.5c-6.8 0-12.3-5.5-12.3-12.3s5.5-12.3 12.3-12.3h46.5c6.8 0 12.3 5.5 12.3 12.3s-5.5 12.3-12.3 12.3zM692.6 946.1H583.2c-6.8 0-12.3-5.5-12.3-12.3s5.5-12.3 12.3-12.3h109.4c6.8 0 12.3 5.5 12.3 12.3s-5.5 12.3-12.3 12.3z' fill='#FFFFFF' p-id='1379'></path><path d='M482.7 37.2a2.4 12.9 0 1 0 4.8 0 2.4 12.9 0 1 0-4.8 0Z' fill='#E61F19' p-id='1380'></path><path d='M471.815238 41.228483a12.9 2.4 60 1 0 4.156922-2.4 12.9 2.4 60 1 0-4.156922 2.4Z' fill='#E61F19' p-id='1381'></path><path d='M464.395278 50.104281a12.9 2.4 30 1 0 2.4-4.156921 12.9 2.4 30 1 0-2.4 4.156921Z' fill='#E61F19' p-id='1382'></path><path d='M449.5 59.1a12.9 2.4 0 1 0 25.8 0 12.9 2.4 0 1 0-25.8 0Z' fill='#E61F19' p-id='1383'></path><path d='M454.02689 76.76484a2.4 12.9 60 1 0 22.343455-12.9 2.4 12.9 60 1 0-22.343455 12.9Z' fill='#E61F19' p-id='1384'></path><path d='M466.82967 89.746515a2.4 12.9 30 1 0 12.9-22.343456 2.4 12.9 30 1 0-12.9 22.343456Z' fill='#E61F19' p-id='1385'></path><path d='M481.9 81.8a2.4 12.9 0 1 0 4.8 0 2.4 12.9 0 1 0-4.8 0Z' fill='#E61F19' p-id='1386'></path><path d='M493.406379 80.209421a12.9 2.4 60 1 0 4.156922-2.4 12.9 2.4 60 1 0-4.156922 2.4Z' fill='#E61F19' p-id='1387'></path><path d='M502.6155 73.105308a12.9 2.4 30 1 0 2.4-4.156922 12.9 2.4 30 1 0-2.4 4.156922Z' fill='#E61F19' p-id='1388'></path><path d='M494.1 59.9a12.9 2.4 0 1 0 25.8 0 12.9 2.4 0 1 0-25.8 0Z' fill='#E61F19' p-id='1389'></path><path d='M493.026112 55.155938a2.4 12.9 60 1 0 22.343455-12.9 2.4 12.9 60 1 0-22.343455 12.9Z' fill='#E61F19' p-id='1390'></path><path d='M489.731457 51.61361a2.4 12.9 30 1 0 12.9-22.343455 2.4 12.9 30 1 0-12.9 22.343455Z' fill='#E61F19' p-id='1391'></path><path d='M643.8 34.6m-15.7 0a15.7 15.7 0 1 0 31.4 0 15.7 15.7 0 1 0-31.4 0Z' fill='#2C65AF' p-id='1392'></path><path d='M351.6 109.5c-2.4 0-4.4-2-4.4-4.4V57.2c0-2.4 2-4.4 4.4-4.4 2.4 0 4.4 2 4.4 4.4v47.9c0 2.4-2 4.4-4.4 4.4z' fill='#2C65AF' p-id='1393'></path><path d='M375.5 85.5h-47.9c-2.4 0-4.4-2-4.4-4.4 0-2.4 2-4.4 4.4-4.4h47.9c2.4 0 4.4 2 4.4 4.4 0 2.4-1.9 4.4-4.4 4.4z' fill='#2C65AF' p-id='1394'></path><path d='M829.8 174.8c-6-2.6-12.4-1.1-14.3 3.3l-37 85.8c-1.9 4.4 1.4 10.1 7.4 12.7 6 2.6 12.4 1.1 14.3-3.3l37-85.8c1.9-4.5-1.4-10.2-7.4-12.7z' fill='#DAB647' p-id='1395'></path><path d='M757 203.7c-2.6 6-1.1 12.4 3.3 14.3l85.8 37c4.4 1.9 10.1-1.4 12.7-7.4 2.6-6 1.1-12.4-3.3-14.3l-85.8-37c-4.5-1.9-10.1 1.4-12.7 7.4z' fill='#DAB647' p-id='1396'></path><path d='M659.4 168.1c-21.9 0-39.7-17.6-39.7-39.3s17.8-39.3 39.7-39.3c21.9 0 39.7 17.6 39.7 39.3s-17.7 39.3-39.7 39.3z m0-68.3c-16.1 0-29.2 13-29.2 28.9s13.1 28.9 29.2 28.9 29.2-13 29.2-28.9-13.1-28.9-29.2-28.9z' fill='#E62A52' p-id='1397'></path><path d='M481 620.3h-0.7c-48.2 0-94.9-14.2-135-41-40.1-26.8-71.1-64.5-89.5-109.1-9-21.8-14.8-44.7-17.2-68.1-0.7-6.7 4.2-12.8 11-13.5 6.7-0.7 12.8 4.2 13.5 11 2.2 21 7.4 41.6 15.5 61.2 34 82 113.2 134.9 201.9 134.9h0.6c57.4 0 113.5-23.3 153.9-64 55.1-55 76.8-136 56.7-211.2S612.2 186 537 165.9c-65.1-17.4-135.8-3.4-189.3 37.6-5.4 4.1-13.1 3.1-17.2-2.3s-3.1-13.1 2.3-17.2c29.3-22.4 63.9-38.1 100.1-45.3 36.4-7.3 74.7-6.1 110.6 3.5 41.2 11 78.9 32.8 109 63 30.1 30.1 51.9 67.8 63 109s11 84.7 0 125.9-32.8 78.9-63 109c-22.6 22.7-49.1 40.5-78.8 52.8-29.7 12.2-60.8 18.4-92.7 18.4zM252.2 354.4c-0.6 0-1.2 0-1.9-0.1-6.7-1-11.3-7.3-10.3-14 6-38.8 21.4-76 44.7-107.5 4-5.5 11.7-6.6 17.2-2.6 5.5 4 6.6 11.7 2.6 17.2-20.9 28.3-34.8 61.7-40.1 96.6-1 6.1-6.2 10.4-12.2 10.4z' fill='' p-id='1398'></path><path d='M861.3 1001.2H99.5c-6.8 0-12.3-5.5-12.3-12.3 0-53.1 10.4-104.6 30.9-153.1 19.8-46.8 48.1-88.9 84.3-125 36.1-36.1 78.2-64.4 125-84.3 48.5-20.5 100-30.9 153.1-30.9 54.6 0 107.5 11 157.2 32.7 48 20.9 90.7 50.8 127.1 88.8 4.7 4.9 4.5 12.7-0.4 17.4-4.9 4.7-12.7 4.5-17.4-0.4-70.4-73.3-165-113.8-266.6-113.8-199.1 0-361.9 158.7-368.4 356.3h736.8c-2.2-68-23-133.6-60.4-190.3-3.7-5.7-2.2-13.3 3.5-17 5.7-3.7 13.3-2.2 17 3.5 42.3 64.2 64.7 138.9 64.7 216.2 0 6.7-5.5 12.2-12.3 12.2z' ></path></svg>");
}
.icon-password {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg t='1535533476140' class='icon' style='' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg'  width='27' height='27'><path d='M733.199807 518.174626c-7.409551 0-13.435986-6.026435-13.435986-13.435986V405.253063c0-101.659045-82.789387-184.448432-184.448433-184.448432H516.939701c-101.659045 0-184.448432 82.789387-184.448432 184.448432 0 7.409551-6.026435 13.435986-13.435987 13.435987s-13.435986-6.026435-13.435986-13.435987c0-28.551471 5.631259-56.213796 16.597395-82.295417 10.669754-25.192475 25.884033-47.816305 45.346454-67.179933 19.462422-19.462422 41.987458-34.6767 67.179933-45.346454 26.081621-11.06493 53.743946-16.597395 82.295417-16.597395h18.375687c28.551471 0 56.213796 5.631259 82.295418 16.597395 25.192475 10.669754 47.816305 25.884033 67.179932 45.346454s34.6767 41.987458 45.346454 67.179933c11.06493 26.081621 16.597395 53.743946 16.597396 82.295417v99.386783c-0.197588 7.508345-6.224023 13.534781-13.633575 13.53478z' fill='#FF9D00' p-id='1526'></path><path d='M319.450458 508.097636c-67.476315 0-122.998553 55.127062-122.998553 122.603377v269.411288c0 67.081138 55.621032 123.887699 122.998553 123.887699h416.317994c67.476315 0 122.603377-56.905355 122.603376-124.381669V630.207043c0-67.476315-52.953594-122.603377-123.492523-122.603377l-415.428847 0.49397z' fill='#FF9D00' p-id='1527'></path><path d='M577.204052 84.765268a11.954076 2.173468 90 1 0 4.346937 0 11.954076 2.173468 90 1 0-4.346937 0Z' fill='#E61F19' p-id='1528'></path><path d='M567.087398 88.436236a11.954076 2.173468 60 1 0 3.764558-2.173468 11.954076 2.173468 60 1 0-3.764558 2.173468Z' fill='#E61F19' p-id='1529'></path><path d='M560.259363 96.640306a11.954076 2.173468 30 1 0 2.173469-3.764557 11.954076 2.173468 30 1 0-2.173469 3.764557Z' fill='#E61F19' p-id='1530'></path><path d='M546.479112 105.116836a11.954076 2.173468 0 1 0 23.908153 0 11.954076 2.173468 0 1 0-23.908153 0Z' fill='#E61F19' p-id='1531'></path><path d='M550.634868 121.365965a2.173468 11.954076 60 1 0 20.705067-11.954076 2.173468 11.954076 60 1 0-20.705067 11.954076Z' fill='#E61F19' p-id='1532'></path><path d='M562.388303 133.45707a2.173468 11.954076 30 1 0 11.954077-20.705067 2.173468 11.954076 30 1 0-11.954077 20.705067Z' fill='#E61F19' p-id='1533'></path><path d='M576.512494 126.061167a11.954076 2.173468 90 1 0 4.346937 0 11.954076 2.173468 90 1 0-4.346937 0Z' fill='#E61F19' p-id='1534'></path><path d='M587.174434 124.563547a11.954076 2.173468 60 1 0 3.764558-2.173468 11.954076 2.173468 60 1 0-3.764558 2.173468Z' fill='#E61F19' p-id='1535'></path><path d='M595.679044 117.914762a11.954076 2.173468 30 1 0 2.173468-3.764558 11.954076 2.173468 30 1 0-2.173468 3.764558Z' fill='#E61F19' p-id='1536'></path><path d='M587.676218 105.808394a11.954076 2.173468 0 1 0 23.908152 0 11.954076 2.173468 0 1 0-23.908152 0Z' fill='#E61F19' p-id='1537'></path><path d='M586.686817 101.413799a2.173468 11.954076 60 1 0 20.705067-11.954076 2.173468 11.954076 60 1 0-20.705067 11.954076Z' fill='#E61F19' p-id='1538'></path><path d='M583.666549 98.124181a2.173468 11.954076 30 1 0 11.954077-20.705067 2.173468 11.954076 30 1 0-11.954077 20.705067Z' fill='#E61F19' p-id='1539'></path><path d='M655.350121 14.423927m-14.423927 0a14.423927 14.423927 0 1 0 28.847853 0 14.423927 14.423927 0 1 0-28.847853 0Z' fill='#2C65AF' p-id='1540'></path><path d='M442.942981 74.095514c-2.272262 0-4.050555-1.877086-4.050555-4.050555V25.785239c0-2.272262 1.877086-4.050555 4.050555-4.050555 2.272262 0 4.050555 1.877086 4.050555 4.050555v44.358514c0.098794 2.173468-1.778292 3.951761-4.050555 3.951761z' fill='#7CCBE2' p-id='1541'></path><path d='M465.171635 51.965654h-44.358514c-2.272262 0-4.050555-1.877086-4.050555-4.050555s1.877086-4.050555 4.050555-4.050555h44.358514c2.272262 0 4.050555 1.877086 4.050555 4.050555s-1.877086 4.050555-4.050555 4.050555z' fill='#7CCBE2' p-id='1542'></path><path d='M796.526773 206.677086c-4.346937-1.877086-8.990256-0.790352-10.472166 2.371057l-26.970767 62.536613c-1.383116 3.260203 0.98794 7.310757 5.433671 9.187844 4.445731 1.877086 8.990256 0.790352 10.472166-2.371056l26.970767-62.43782c1.284322-3.260203-1.086734-7.409551-5.433671-9.286638z' fill='#2C65AF' p-id='1543'></path><path d='M743.474385 227.720212c-1.877086 4.346937-0.790352 8.990256 2.371056 10.472166l62.43782 26.970767c3.260203 1.383116 7.310757-0.98794 9.187844-5.433671 1.877086-4.346937 0.790352-8.990256-2.371057-10.472166l-62.437819-26.970767c-3.161409-1.284322-7.310757 1.086734-9.187844 5.433671z' fill='#2C65AF' p-id='1544'></path><path d='M731.915485 146.511529c-20.252774 0-36.751375-16.399807-36.751375-36.454993s16.498601-36.454993 36.751375-36.454992c20.252774 0 36.751375 16.399807 36.751375 36.454992S752.168259 146.511529 731.915485 146.511529z m0-63.228172c-14.917897 0-27.069561 11.954076-27.069561 26.773179s12.151664 26.773179 27.069561 26.773179c14.917897 0 27.069561-11.954076 27.069561-26.773179S746.833382 83.283357 731.915485 83.283357z' fill='#E62A52' p-id='1545'></path><path d='M694.373758 1004.438784H278.055765c-18.276893 0-36.158611-3.754173-53.052388-11.06493-16.202219-7.014375-30.823734-17.091365-43.370574-29.736999-12.54684-12.744428-22.426242-27.365943-29.24303-43.666956-7.113169-16.893777-10.768548-34.6767-10.768548-52.8548v-37.442933c0-7.409551 6.026435-13.435986 13.435987-13.435987s13.435986 6.026435 13.435986 13.435987v37.442933c0 59.869175 50.187361 110.451712 109.562567 110.451712h416.317993c59.177617 0 109.16739-50.780125 109.16739-110.945682v-24.994887c0-7.409551 6.026435-13.435986 13.435987-13.435986s13.435986 6.026435 13.435986 13.435986v24.994887c0 18.276893-3.556585 36.158611-10.669754 53.151182-6.915581 16.399807-16.696189 31.120116-29.144235 43.76575-25.884033 26.378003-59.967969 40.900724-96.225374 40.900723z m122.603377-206.479498c-7.409551 0-13.435986-6.026435-13.435987-13.435986V597.111047c0-61.252291-48.310275-109.16739-110.056536-109.16739l-415.428847 0.395176c-60.461939 0-109.562566 49.001833-109.562567 109.16739v15.708249c0 7.409551-6.026435 13.435986-13.435986 13.435986s-13.435986-6.026435-13.435987-13.435986v-15.708249c0-36.257405 14.226339-70.341341 40.209166-96.12658 25.884033-25.686445 60.066763-39.912783 96.324168-39.912783l415.428847-0.395176c37.442933 0 72.218427 14.226339 97.806078 40.011577 25.291269 25.488857 39.122431 59.572793 39.122431 96.12658v187.412253c-0.098794 7.310757-6.125229 13.337192-13.53478 13.337192z m-661.919923-25.785239c-7.409551 0-13.435986-6.026435-13.435987-13.435986v-91.186879c0-7.409551 6.026435-13.435986 13.435987-13.435987s13.435986 6.026435 13.435986 13.435987v91.186879c0 7.409551-6.026435 13.435986-13.435986 13.435986z' fill='' p-id='1546'></path><path d='M450.451327 766.937964v52.558418c0 19.462422 14.522721 34.874288 33.985142 34.874289h3.062614c19.462422 0 33.491172-15.411867 33.491173-34.874289V766.937964c26.476797-12.843222 39.320019-37.047757 39.320019-65.302846 0-41.493488-33.095996-74.98466-74.49069-74.98466s-74.095514 33.491172-74.095514 74.98466c0 27.761119 16.696189 52.459624 38.727256 65.302846z' fill='' p-id='1547'></path><path d='M691.805113 484.979836c-7.409551 0-13.435986-6.026435-13.435986-13.435987V372.157067c0-101.659045-82.789387-184.448432-184.448432-184.448432h-18.375688c-101.659045 0-184.448432 82.789387-184.448432 184.448432 0 7.409551-6.026435 13.435986-13.435986 13.435987s-13.435986-6.026435-13.435987-13.435987c0-28.551471 5.631259-56.213796 16.597395-82.295417 10.669754-25.192475 25.884033-47.816305 45.346455-67.179933 19.462422-19.462422 41.987458-34.6767 67.179932-45.346454 26.081621-11.06493 53.743946-16.597395 82.295417-16.597395h18.375688c28.551471 0 56.213796 5.631259 82.295417 16.597395 25.192475 10.669754 47.816305 25.884033 67.179932 45.346454 19.462422 19.462422 34.6767 41.987458 45.346455 67.179933 11.06493 26.081621 16.597395 53.743946 16.597395 82.295417V471.543849c-0.098794 7.409551-6.125229 13.435986-13.633575 13.435987z' fill='' p-id='1548'></path></svg>");
}
.likas {
  .el-input__inner {
    border: none;
    font-size: 15px;
    border-radius: 0;
    border-bottom: 1px solid #dcdfe6;
    &:focus {
      border-bottom: 1px solid #409eff;
      font-weight: bold;
      color: #000;
    }
  }
}
</style>

